import React, { useEffect, useState } from 'react'
import {
  Button,
  Card,
  Cascader,
  Form,
  Input,
  InputNumber,
  message,
  Radio,
  Upload,
} from "antd"
import { PlusOutlined } from '@ant-design/icons';
import { getCascadeCategoryApi } from "../../../apis/categoryApi"
import { addProductApi } from "../../../apis/productApi"
import MyUpload from '../../../components/MyUpload';
const { TextArea } = Input;

export default function ProductAdd() {
  const [cascadeData, setCascadeData] = useState([])
  const [typeId, setTypeId] = useState("")
  const [imgName,setImgName] = useState("")
  useEffect(() => {
    fetchData()
  }, [])
  const fetchData = async () => {
    const res = await getCascadeCategoryApi()
    console.log(res);
    setCascadeData(res.data.data)
  }
  const onFinish = async (values) => {
    values.type = typeId
    values.imgSrc = imgName
    console.log(values);
    const res = await addProductApi(values)
    if (res.data.code) {
      message.success("添加成功")
    } else {
      message.error("添加失败")
    }
  }
  const onFinishFailed = (error) => {
    console.log(error);
  }
  const cascadeChangeEvent = (p1, p2) => {
    console.log(p1, p2);
    setTypeId(p2[1].id)
  }
  return (
    <Card
      title="添加商品"
      extra={<Button>返回</Button>}
      style={{ width: "800px" }}
    >
      <Form
        labelCol={{
          span: 4,
        }}
        wrapperCol={{
          span: 14,
        }}
        layout="horizontal"
        style={{
          maxWidth: 600,
        }}
        onFinish={onFinish}
        onFinishFailed={onFinishFailed}
      >
        <Form.Item label="商品名字" name="name" rules={[{ required: true }]}>
          <Input placeholder='请输入商品名字' />
        </Form.Item>
        <Form.Item label="商品描述" name="title">
          <Input placeholder='请输入商品描述' />
        </Form.Item>
        <Form.Item label="商品价格" name="price">
          <InputNumber />
        </Form.Item>
        <Form.Item label="商品分类" name="type">
          <Cascader
            onChange={cascadeChangeEvent}
            options={cascadeData}
          />
        </Form.Item>
        <Form.Item label="商品图片" valuePropName="fileList">
          <MyUpload setImgName={setImgName} name="imgSrc" action="http://127.0.0.1:8002/goods/fileUpload"></MyUpload>
        </Form.Item>
        <Form.Item label="商品描述" name="msg">
          <TextArea rows={4} />
        </Form.Item>
        <Form.Item>
          <Button type="primary" htmlType="submit">添加商品</Button>
        </Form.Item>

      </Form>
    </Card>
  )
}
